<template>
  <div class="reportrjss-wraper">
    <OperationContainer align="right" style="display: flex;margin-bottom: 10px; justify-content: space-between;">
      <div class="block">
        <span class="demonstration">年/月：</span>
        <el-date-picker
          v-model="dataTime"
          size="mini"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="btn-box">
        <Button icon="search" @click="handleSeach" style="margin-bottom: 10px; float: left; margin-right: 10px;"
          >查询</Button
        >
        <Button icon="reset" @click="handleRest" style="margin-bottom: 10px"
          >重置</Button
        >
      </div>
    </OperationContainer>
    <div class="tab-box">
      <el-table
        v-loading="loading"
        :data="tableData"
        :span-method="objectSpanMethod"
        stripe
        border
        :header-cell-style="{ background: '#f5f7fa' }"
        style="width: 100%"
        height="100%"
        size="small"
      >
        <el-table-column
          prop="emplName"
          align="center"
          label="开单医生"
          width="120"
        />
        <el-table-column
          prop="deptName"
          label="科室"
          align="center"
          width="120"
        />
        <el-table-column
          prop="patientName"
          align="left"
          label="患者姓名"
          width="120"
        />
        <el-table-column prop="diagName" align="center" label="诊断" width="260" />
        <el-table-column prop="phoneTel" align="center" label="患者电话" width="120" />
        <el-table-column prop="createTime" align="center" label="预约日期" width="180" />
        <el-table-column
          prop="RYRQ"
          align="center"
          label="入院日期"
        />
        <el-table-column
          prop="CYRQ"
          align="center"
          label="出院日期"
        />
        <el-table-column
          prop="FYZJRQ"
          align="center"
          label="费用转结日期"
        />
        <el-table-column
          prop="isPay"
          align="center"
          label="是否支付"
        />
      </el-table>
    </div>
    <div class="fen-ye">
      <!-- <span class="zong-ji">总计：{{ dataTotal }}</span> -->
      <div style="text-align: right; padding: 8px 0 0 0">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { listPatientInfoToDoctor } from "../../utils/apis/preparedness";
export default {
  name: "CheckReport",
  data() {
    return {
      spanArr: [],
      psition: 0,
      loading: false,
      tableData: [],
      jobNumber: this.$route.query.jobNumber,
      dataTime: ["2023-03-01", this.$moment().format("YYYY-MM-DD")],
      total: 0,
      dataTotal: 1,
      pageNum: 1,
      currentPage: 1,
      pageSize: 10,
      spanArr: []
    };
  },
  mounted() {
    this.getSpanArr();
    // console.log(111111111, this.jobNumber);
  },
  methods: {
    handleSeach() {
      this.dataTime = this.dataTime;
      this.pageNum = 1;
      this.getSpanArr();
    },
    handleRest() {
      this.dataTime = ["2023-03-01", this.$moment().format("YYYY-MM-DD")];
      this.getSpanArr();
    },
    handleCurrentChange(val) {
      // console.log("--------------", val);
      this.pageNum = val;
      this.getSpanArr();
    },
    handleSizeChange(val) {
      // console.log("--------------", val);
      this.pageSize = val;
      this.getSpanArr();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loading = true;
      this.getSpanArr();
    },
    getSpanArr() {
      const params = {
         type: 2,
        jobNumber: this.jobNumber,
        startTime: this.dataTime[0] + " 00:00:00",
        endTime: this.dataTime[1] + " 23:59:59",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.loading = true;
      listPatientInfoToDoctor(params).then((res) => {
        this.loading = false;
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.dataTotal = this.tableData.length;
          this.total = res.data.data.total;
          this.rowspan();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    rowspan() {
      this.spanArr = [];
      (this.tableData||[]).forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.tableData[index].deptName ===
            this.tableData[index - 1].deptName
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
      // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>

<style lang="less" scoped>
.reportrjss-wraper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-box {
    // flex: 1;
    // border: 1px solid red;
    width: 140px;
  }
  .tab-box {
    flex: 1;
    margin-bottom: 15px;
  }

  // .fen-ye {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  // }

}
</style>
